<template>
    <a-drawer
        :title="title"
        :width="drawerWidth"
        @close="handleCancel"
        :visible="visible"
        :confirmLoading="confirmLoading">
   
    <div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff'}">
        <a-spin :spinning="confirmLoading">
            <a-form-model ref="form" :model="model" :rules="validatorRules">
                <a-form-model-item label="菜单类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-radio-group @change="onChangeMenuType" v-model="model.menuType">
                        <a-radio :value="0">一级菜单</a-radio>
                        <a-radio :value="1">子菜单</a-radio>
                        <a-radio :value="2">按钮/权限</a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    :label="menuLabel"
                    prop="name"
                    hasFeedback>
                    <a-input placeholder="请输入菜单名称" v-model="model.name" :readonly="disableSubmit"/>
                </a-form-model-item>
                <a-form-model-item
                    v-show="model.menuType != 0"
                    label="上级菜单"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    :validate-status="validateStatus"
                    :hasFeedback="true"
                    :required="true">
                    <span slot="help">{{validateStatus == 'error'?'请选择上级菜单':'&nbsp;&nbsp;'}}</span>
                    <a-tree-select 
                        style="width: 100%" 
                        :dropdownStyle="{ maxHeight: '200px',overflow: 'auto' }"
                        :treeData="treeData"
                        v-model="model.parentId" 
                        placeholder="请选择父级菜单"
                        :disabled="disableSubmit"
                        @change="handleParentIdChange"
                    ></a-tree-select>
                </a-form-model-item>
                <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="url"
                    label="菜单路径">
                    <a-input placeholder="请输入菜单路径" v-model="model.url" :readOnly="disableSubmit"/>
                </a-form-model-item>
                <a-form-model-item
                    v-show="show"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="component"
                    label="前端组件"
                    >
                    <a-input placeholder="请输入前端组件" v-model="model.component" :readOnly="disableSubmit"/>
                </a-form-model-item>
                <a-form-model-item
                    v-show="model.menuType==0"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="默认跳转地址">
                    <a-input placeholder="请输入路由参数 redirect" v-model="model.redirect" :readOnly="disableSubmit"/>    
                </a-form-model-item>
                <a-form-model-item
                    v-show="!show"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="perms"
                    label="授权标识">
                    <a-input placeholder="请输入授权标识, 如: user:list" v-model="model.perms" :readOnly="disableSubmit"/>
                </a-form-model-item>
                <a-form-model-item
                    v-show="!show"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="授权策略"
                >
                    <j-dict-select-tag v-model="model.permsType" placeholder="请选择授权策略" :type="'radio'" dictCode="global_perms_type"></j-dict-select-tag>
                </a-form-model-item>
                <a-form-model-item
                    v-show="!show"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="状态"
                >
                    <j-dict-select-tag v-model="model.permsType" placeholder="请选择状态" :type="'radio'" dictCode="valid_status"></j-dict-select-tag>
                </a-form-model-item>
                 <a-form-model-item
                    v-show="show"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="菜单图标">
                    <a-input placeholder="点击选择图标" v-model="model.icon" :readOnly="disableSubmit">
                        <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
                    </a-input>
                 </a-form-model-item>
                  <a-form-model-item
                        v-show="show"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        prop="sortNo"
                        label="排序">
                 <a-input-number placeholder="请输入菜单排序" v-model="model.sortNo" style="width: 200px" :readOnly="disableSubmit"/>
                 </a-form-model-item>
                  <a-form-model-item
                    v-show="show"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="是否路由菜单">
                    <a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.route"/>
               </a-form-model-item>
                <a-form-model-item
                    v-show="show"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="隐藏路由">
                    <a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.hidden"/>
                </a-form-model-item>

                  <a-form-model-item
                    v-show="show"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="是否缓存路由">
                    <a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.keepAlive"/>
                 </a-form-model-item>

                 <a-form-model-item
                        v-show="show"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="聚合路由">
                        <a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.alwaysShow"/>
                 </a-form-model-item>

                  <a-form-model-item
                    v-show="show"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="打开方式">
                    <a-switch checkedChildren="外部" unCheckedChildren="内部" v-model="model.internalOrExternal"/>
                  </a-form-model-item>

            </a-form-model>
            <!-- 选择图标组件 -->
            <icon  @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icon>
        </a-spin>
        <a-row :style="{textAlign: 'right'}">
            <a-button :style="{marginRight: '8px'}" @click="handleCancel">关闭</a-button>
            <a-button :disabled="disableSubmit" @click="handleOk" type="primary">确定</a-button>
        </a-row>
    </div>
   </a-drawer>
</template>
<script>
import  Icon  from '@/common/components/icon/Icon'
export default {
    name: 'PermissionForm',
    components: { Icon },
    data() {
        return {
            title: '操作',
            drawerWidth: 700,
            visible: false,
            confirmLoading: false,
            model: {},
            // 根据菜单类型 动态控制表单元素的显示隐藏
            show: true,
            menuLabel: '菜单名称',
            labelCol: {
                xs: {span: 24},
                sm: {span: 5}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16}
            },
            disableSubmit: false,
            // 下拉树
            treeData: [],
             validateStatus:"",
            //  控制选择图标弹窗
            iconChooseVisible: false
        }
    },
    computed: {
        validatorRules:function() {
            return {
                name: [{required: true,message: '请输入菜单标题'}]
            }
        }
    },
    methods: {
        // 根据屏幕的变化 设置抽屉尺寸
        resetScreenSize() {
            let screenWidth = document.body.clientWidth;
            if(screenWidth < 500) {
                this.drawerWidth = screenWidth
            }else {
                this.drawerWidth = 700
            }
        },
        add() {
            this.edit({status: '1',permsType: '1',sortNo:1.0,route: true,menuType:0});
        },
        edit(record) {
            this.resetScreenSize();
            this.model = Object.assign({},record);
            this.show = record.menuType == 2 ? false:true;
            this.menuLabel = record.menuType==2?'按钮/权限':'菜单名称'
            this.visible = true;
       },
       // 点击选择菜单图标
       selectIcons() {
            this.iconChooseVisible = true
       },
       // 关闭form表单的函数
       close() {
           this.$emit('close');
           this.disableSubmit = false;
           this.visible = false;
           this.$refs.form.resetFields();
       },
        handleCancel() {
             this.close()
        },
        handleOk() {
          // 触发表单的校验验证
          this.$refs.form.validate(valid => {
              if(valid) {
                //   TODO表单校验失败的一系列操作 
              }
          })
          this.close();
        },
        onChangeMenuType() {
            if(this.model.menuType == 2) {
                this.show = false;
                this.menuLabel = '按钮/权限';
            }else {
                this.show = true;
                this.menuLabel='菜单名称';
            }
            this.$nextTick(()=>{
                this.$refs.form.validateField(['url','component']);
            })
        },
        handleParentIdChange() {},
        // 选中图标的监听事件
        handleIconChoose(choosedIcon) {
             this.model.icon = choosedIcon;
             this.iconChooseVisible = false
        },
        // 监听关闭弹窗的事件
        handleIconCancel() {
            this.iconChooseVisible = false
        }
    }
}
</script>